{% extends "base.html" %}

{% block head %}
  <script type="text/javascript" src="/media/js/map/index.js"></script>
{% endblock %}

{% block content %}
  <h4>List of available services</h4>

  <p>
    The following list is loaded via an ajax request on page load.
  </p>
  
  <ul id="services"><li>Services not loaded :(</li></ul>

  <h4>View a map</h4>

  <label>
    Service
    <select id="service">
      <option value="google">Google</option>
    </select>
  </label>
  <label>X: <input type="text" value="30" id="x"></label>
  <label>Y: <input type="text" value="-90" id="y"></label>
  <label>Zoom: <input type="text" value="10" id="z"></label>

  <button onclick="view()">View this map !</button>
{% endblock %}
